<ul class="list-group">
    <li class="list-group-item" *ngFor="let dataItem of data">
        <!--[dataItem]="dataItem"属性绑定父组件向子组件传递数据-->
        <list-item [dataItem]="dataItem" (ontan)="tan($event)"></list-item>
    </li>
</ul>
<!---->
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" name="email" ngModel>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="password" ngModel>
    </div>
    <div class="form-group ">
        <label for="products">用户</label>
        <select class="form-control" name="ddd" ngModel>
            <option value="">请选择</option>
          <option *ngFor="let t of technologies" [value]="t">{{t}}</option>
      </select>
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
<!--formBulider-->
<form [formGroup]="myForm" (ngSubmit)="onSubmitBuilder(myForm.value)">
    <!--<div class="field" [class.error]="!favourite.valid && favourite.touched">-->
    <div class="form-group">
        <label for="exampleInputEmail1">favourite</label>
        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Email" name="email" [formControl]="favourite">
    </div>
    <p *ngIf="!favourite.valid" class="bg-danger">SKU is invalid</p>
    <p *ngIf="favourite.hasError('required')" class="bg-danger">SKU is required</p>
    <div *ngIf="favourite.hasError('invalidSku')" class="bg-danger">SKU must begin with <span>123</span></div>
    <!--</div>-->
    <div class="form-group">
        <label for="work">work</label>
        <input type="text" class="form-control" id="work" placeholder="work" name="work" [formControl]="myForm.controls['work']">
    </div>
    <div class="form-group">
        <label for="product">productName</label>
        <input type="text" class="form-control" id="product" placeholder="product" name="productName" [formControl]="myForm.get('productName')" [(ngModel)]="productName">
    </div>
    <!--单选-->
    <div class="form-group">
        <label for="mail">男</label>
        <input type="radio" #raido class="" id="mail" name="sex" [(ngModel)]="sex" value="mail" [formControl]="myForm.controls['sex']">
        <label for="femail">女</label>
        <input type="radio" class="" id="femail" name="sex" [(ngModel)]="sex" value="femail" [formControl]="myForm.controls['sex']">
    </div>
    <!--下拉选择-->
    <div class="form-group ">
        <label for="products">用户</label>
        <select class="form-control" name="ddd" [(ngModel)]="technologie" [formControl]="myForm.controls['technologies']">
            <option value="">请选择</option>
          <option *ngFor="let t of technologies" [value]="t">{{t}}</option>
      </select>
    </div>

    <p *ngIf="!myForm.valid" class="bg-danger">Form is invalid</p>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
<!--<form action="">

    <label for="products">用户</label>
    <select class="form-control" ngControl="technology" name="ddd" [(ngModel)]="developer.technology">
          <option *ngFor="let t of technologies" [value]="t">{{t}}</option>
      </select>

</form>-->
<p class="bg-info">{{productName}}</p>
<pre class="bg-info">{{products}}</pre>
<p *ngIf="sex=='mail'">选择男，则显示，否则隐藏</p>